<template>
  <view class="wrap">
    <u-navbar
      backIconColor="#333333"
      title-size="36"
      title="采购商品"
      height="50"
      :is-back="true"
      :border-bottom="false"
      title-color="#333333"
    >
    </u-navbar>
    <u-gap height="20"></u-gap>
    <view class="goods-box">
      <!-- <u-button @click="clear">清空列表</u-button> -->
      <u-waterfall v-model="flowList" ref="uWaterfall">
        <template v-slot:left="{ leftList }">
          <view class="demo-warter" v-for="(item, index) in leftList" :key="index">
            <!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
            <u-lazy-load
              threshold="-450"
              border-radius="10"
              :image="item.image"
              :index="index"
            ></u-lazy-load>
            <view class="content">
              <view class="demo-title">
                {{ item.title }}
              </view>
              <view class="demo-price">
                <!-- {{item.price}}元 -->
                赠送70联盟豆
              </view>

              <view class="demo-shop dis-flex flex-y-between">
                <view class="price">700收益豆</view>
                <view class="buy">购买</view>
              </view>
            </view>
            <!-- <u-icon name="close-circle-fill" color="#fa3534" size="34" class="u-close" @click="remove(item.id)"></u-icon> -->
          </view>
        </template>
        <template v-slot:right="{ rightList }">
          <view class="demo-warter" v-for="(item, index) in rightList" :key="index">
            <u-lazy-load
              threshold="-450"
              border-radius="10"
              :image="item.image"
              :index="index"
            ></u-lazy-load>
            <view class="content">
              <view class="demo-title">
                {{ item.title }}
              </view>
              <view class="demo-price">
                <!-- {{item.price}}元 -->
                赠送70联盟豆
              </view>

              <view class="demo-shop dis-flex flex-y-between">
                <view class="price">700收益豆</view>
                <view class="buy">购买</view>
              </view>
            </view>
          </view>
        </template>
      </u-waterfall>
    </view>
    <u-loadmore
      bg-color="rgb(240, 240, 240)"
      :status="loadStatus"
      @loadmore="addRandomData"
    ></u-loadmore>
  </view>
</template>

<script>
export default {
  data() {
    return {
      loadStatus: 'loadmore',
      flowList: [],
      list: [
        {
          price: 35,
          title: '北国风光，千里冰封，万里雪飘',
          shop: '李白杜甫白居易旗舰店',
          image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg'
        },
        {
          price: 75,
          title: '望长城内外，惟余莽莽',
          shop: '李白杜甫白居易旗舰店',
          image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg'
        },
        {
          price: 385,
          title: '大河上下，顿失滔滔',
          shop: '李白杜甫白居易旗舰店',
          image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg'
        },
        {
          price: 784,
          title: '欲与天公试比高',
          shop: '李白杜甫白居易旗舰店',
          image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/zzpic23369_s.jpg'
        },
        {
          price: 7891,
          title: '须晴日，看红装素裹，分外妖娆',
          shop: '李白杜甫白居易旗舰店',
          image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2130_s.jpg'
        },
        {
          price: 2341,
          shop: '李白杜甫白居易旗舰店',
          title: '江山如此多娇，引无数英雄竞折腰',
          image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23346_s.jpg'
        },
        {
          price: 661,
          shop: '李白杜甫白居易旗舰店',
          title: '惜秦皇汉武，略输文采',
          image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23344_s.jpg'
        },
        {
          price: 1654,
          title: '唐宗宋祖，稍逊风骚',
          shop: '李白杜甫白居易旗舰店',
          image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg'
        },
        {
          price: 1678,
          title: '一代天骄，成吉思汗',
          shop: '李白杜甫白居易旗舰店',
          image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg'
        },
        {
          price: 924,
          title: '只识弯弓射大雕',
          shop: '李白杜甫白居易旗舰店',
          image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg'
        },
        {
          price: 8243,
          title: '俱往矣，数风流人物，还看今朝',
          shop: '李白杜甫白居易旗舰店',
          image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg'
        }
      ]
    }
  },
  onLoad() {
    this.addRandomData()
  },
  onReachBottom() {
    this.loadStatus = 'loading'
    // 模拟数据加载
    setTimeout(() => {
      this.addRandomData()
      this.loadStatus = 'loadmore'
    }, 1000)
  },
  methods: {
    addRandomData() {
      for (let i = 0; i < 10; i++) {
        let index = this.$u.random(0, this.list.length - 1)
        // 先转成字符串再转成对象，避免数组对象引用导致数据混乱
        let item = JSON.parse(JSON.stringify(this.list[index]))
        item.id = this.$u.guid()
        this.flowList.push(item)
      }
    },
    remove(id) {
      this.$refs.uWaterfall.remove(id)
    },
    clear() {
      this.$refs.uWaterfall.clear()
    }
  }
}
</script>

<style>
/* page不能写带scope的style标签中，否则无效 */
page {
  background-color: rgb(240, 240, 240);
}
</style>

<style lang="scss" scoped>
.goods-box {
  margin: 0 20rpx;
}
.demo-warter {
  border-radius: 8px;
  background-color: #ffffff;
  position: relative;
  margin-right: 20rpx;
  margin-bottom: 21rpx;
  width: 345rpx;
}

#u-left-column {
  .demo-warter {
    margin-right: 20rpx;
  }
}

.content {
  padding: 20rpx;
  .demo-title {
    font-size: 28rpx;
    margin-bottom: 19rpx;
  }
  .demo-price {
    font-size: 24rpx;
    color: #ff6f10;
    margin-bottom: 19rpx;
  }

  .demo-shop {
    font-weight: 500;
    font-size: 30rpx;
    color: #fa453c;
    .buy {
      width: 96rpx;
      height: 50rpx;
      background: #10a28f;
      border-radius: 25rpx;
      border: 1px solid #10a28f;
      font-size: 22rpx;
      color: #ffffff;
      line-height: 50rpx;
      text-align: center;
    }
  }
}
</style>
